<template lang="html">
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="160px">
      <el-form-item label="服务分类等级">
        <el-select v-model="form.classify_type" placeholder="请选择">
          <el-option label="一级分类" value="1"></el-option>
          <el-option label="二级分类" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务分类标题">
        <el-col :span="6">
          <el-input v-model="form.classify_name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="一级服务标题Icon">
        <el-upload
          class="avatar-uploader"
          :action= domain
          :http-request = upqiniu
          :show-file-list="false"
          :before-upload="beforeUpload">
          <img v-if="form.classify_logo" :src="form.classify_logo" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item label="热门分类">
        <el-radio v-model="form.radio" label="1">是</el-radio>
        <el-radio v-model="form.radio" label="2">否</el-radio>
      </el-form-item> -->
      <el-form-item label="排 序">
        <el-col :span="6">
          <el-input type="number" v-model="form.classify_branch_id"></el-input>
        </el-col>
        <el-col :span="6">
          &nbsp&nbsp&nbsp可填数字1-50，数字越靠前，代表排序靠前
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button class="buttonall" @click="onSubmit" type="primary">确认添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import { toUnix,toDate } from '@/utils/index'
  export function createClass(mes) {
    return request({
      url: '/v1/classify/create',
      method: 'post',
      data: mes
    })
  }
  export function token() {
    return request({
      url: '/v1/QNtoken/getToken',
      method: 'get',
    })
  }
  export default {
    data() {
      return {
        form: {
          classify_type: 1,
          classify_name: "",
          classify_logo: "",
        },
        token: '',
        domain: 'http://up.qiniu.com',
        qiniuaddr: 'pdsqka1ws.bkt.clouddn.com',
      }
    },
    created: function(){
      token().then(res => {
        if (res.code === 200) {
          // console.log(res);
          this.token = res.data.token
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    methods: {
      onSubmit() {
        createClass(this.form).then(res => {
            if (res.code === 200) {
              this.$message({
                message: 'success!',
                type: 'success'
              });
              this.$router.go(-1)
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              });
            }
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
          });
        })
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      upqiniu(req) {
        console.log(req)
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        let filetype = ''
        if (req.file.type === 'image/png') {
          filetype = 'png'
        } else {
          filetype = 'jpg'
        }
        // 重命名要上传的文件
        const keyname = 'alading' + toUnix(toDate(new Date())) + Math.floor(Math.random() * 100) + '.' + filetype
        // 从后端获取上传凭证token
        const formdata = new FormData()
        formdata.append('file', req.file)
        formdata.append('token', this.token)
        formdata.append('key', keyname)
        // 获取到凭证之后再将文件上传到七牛云空间
        this.axios.post(this.domain, formdata, config).then(res => {
            console.log(2);
            this.form.classify_logo = 'http://' + this.qiniuaddr + '/' + res.data.key
        })
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
